<template>
  <div class="container">
    <Calendar
      :tileContent="tileContent"
      @select="select"
      @next="next"
      @prev="prev"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
    />
    <div class="attendance_list" v-if="work != ''">
      <div class="attendance_div">
        <span class="words">出勤状态：</span>
        <span class="status" v-if="work.type == 0">缺勤</span>
        <span class="status" v-if="work.type == 1">出勤</span>
        <span class="status" v-if="work.type == 2">请假</span>
        <span class="status" v-if="work.type == 3">休息</span>
        <span class="status" v-if="work.type == 4">完勤</span>
        <span class="status" v-if="work.type == 5">调休</span>
        <span class="status" v-if="work.type == 6">加班？</span>
        <span class="status" v-if="work.type == 7">加班</span>
      </div>
      <div class="attendance_div" v-if="work.type == 1 || work.type == 4">
        <span class="words">签到时间：</span>
        <span class="status" v-if="work.time_start == 0">未签到</span>
        <span class="status" v-if="work.time_start != 0">{{work.time_start}}</span>
      </div>
      <div class="attendance_div" v-if="work.type == 1 || work.type == 4">
        <span class="words">签退时间：</span>
        <span class="status" v-if="work.time_end == 0">未签退</span>
        <span class="status" v-if="work.time_end != 0">{{work.time_end}}</span>
      </div>
      <div class="attendance_div" v-if="work.type == 6 || work.type == 7">
        <span class="words">加班签到时间：</span>
        <span class="status" v-if="work.time_start == 0">未签到</span>
        <span class="status" v-if="work.time_start != 0">{{work.time_start}}</span>
      </div>
      <div class="attendance_div" v-if="work.type == 6 || work.type == 7">
        <span class="words">加班签退时间：</span>
        <span class="status" v-if="work.time_end == 0">未签退</span>
        <span class="status" v-if="work.time_end != 0">{{work.time_end}}</span>
      </div>
      <div class="attendance_div">
        <span class="words">填写报表：</span>
        <span class="status" v-if="work.reportforms" @tap="reportforms">已填写（点击查看）</span>
        <span class="status" v-if="!work.reportforms">未填写</span>
      </div>
      <div class="attendance_div">
        <span class="words">审核记录：</span>
        <span class="status">{{work.shenhe == 0 ? '未审核' : '已审核'}}</span>
      </div>
      <div class="attendance_div" v-if="work.shenhe_name != ''">
        <span class="words">审核人：</span>
        <span class="status">{{work.shenhe_name}}</span>
      </div>
      <div class="attendance_div" v-if="work.shenhe_time != 0">
        <span class="words">审核时间：</span>
        <span class="status">{{work.shenhe_time}}</span>
      </div>
    </div>
    <!-- <div v-if="work == '' && btnShow" class="supplement">
      <van-button class="mr10" type="primary" data-title="出勤" data-type="4" @tap="endWork(workid,4,$event)">考勤</van-button>
      <van-button class="mr10" type="warning" data-title="休息" data-type="3">休息</van-button>
      <van-button class="mr10" type="danger" data-title="加班" data-type="7">加班</van-button>
      <van-button class="mr10" type="primary" data-title="调休" data-type="5">调休</van-button>
    </div>-->
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import moment from 'moment'
import 'mpvue-calendar/src/style.css'
export default {
  data () {
    return {
      tileContent: [],
      valueInfo: [2018, 6, 21],
      events: {},
      date: '',
      userId: 0,
      btnShow: true,
      work: 99,
      workid: 0,
      worktime: 0,
      worklong: 0,
      worktype: 0,
      loginType: 0,
      timeEnd: 0,
      workaddress: '',
      workendId: 0,
      workendType: 0,
      workflag: 0,
      reportforms: '',
      endWorktime: 0
    }
  },
  components: {
    Calendar
  },
  onLoad (option) {
    console.log(option)
    if (option) {
      this.isparam = option.isparam
    }
    this.date = moment(new Date()).add('year', 0).format('YYYY-MM-DD');
    let year = moment().year();
    let month = moment().month() + 1;
    if (this.isparam === '1') {
      this.userId = wx.getStorageSync('params_userid')
    } else {
      this.userId = wx.getStorageSync('userInfo').user_id
    }
    this.getthisdayworkinfo()
    this.get_month_workinfo(year, month)
    this.getwork()
  },
  methods: {
    async getthisdayworkinfo () {
      let startTimejs = moment(this.date, 'YYYY-MM-DD').unix();
      let endTimejs = startTimejs + 86400;
      let ret = await api.getuserthisdayworkinfo({ user_id: this.userId, start_time_js: startTimejs, end_time_js: endTimejs });
      if (ret.code === '100') {
        if (ret.work[0]) {
          this.work = ret.work[0]
          if (this.work.shenhe_time != 0) {// eslint-disable-line
            this.work.shenhe_time = moment.unix(this.work.shenhe_time).format('YYYY-MM-DD hh:mm');
          }
          if (this.work.time_start != 0) {// eslint-disable-line
            this.work.time_start = moment.unix(this.work.time_start).format('YYYY-MM-DD hh:mm');
          }
          if (this.work.time_end != 0) {// eslint-disable-line
            this.work.time_end = moment.unix(this.work.time_end).format('YYYY-MM-DD hh:mm');
          }
        } else {
          this.work = ''
        }
      }
    },
    async get_month_workinfo (year, month) {
      this.work = ''
      // let day = new Date(year, month);
      let startTime = Math.round(new Date(year, month - 1).getTime() / 1000);
      let endTime = Math.round(new Date(year, month).getTime() / 1000);
      const res = await api.getusermonthworkinfo({ start_time: startTime, end_time: endTime, user_id: this.userId });
      if (res.code === '100') {
        let datearr = [];
        // type   2：假 3：休 4：勤 5：调 6：加？ 7：加
        res.data.forEach(item => {
          switch (item.type) {
            case 1:
              item.typeInfo = '勤？'
              break;
            case 2:
              item.typeInfo = '假'
              break;
            case 3:
              item.typeInfo = '休'
              break;
            case 4:
              item.typeInfo = '勤'
              break;
            case 5:
              item.typeInfo = '调'
              break;
            case 6:
              item.typeInfo = '加？'
              break;
            case 7:
              item.typeInfo = '加'
              break;
          }
          datearr.push({
            'date': moment.unix(item.time_start).format('YYYY-M-D'),
            'className': 'workday',
            'content': item.typeInfo
          });
        })
        console.log(datearr)
        this.tileContent = datearr
      } else {
        Toast(res.msg, 'noicon')
      }
    },
    async getwork () {
      let userId = wx.getStorageSync('userInfo').user_id
      const res = await api.getuserwork({ user_id: userId });
      if (res) {
        if (res.code === '100') {
          this.work = res.data.type;
          if (res.data.type === 1 || res.data.type === 6) {
            this.workid = res.data.id
            this.timeEnd = res.data.time_end;
            this.workaddress = res.data.address;
            this.reportforms = res.data.reportforms;
          }
          if (res.data.type === 4 || res.data.type === 7) {
            this.timeEnd = res.data.time_end;
            this.workaddress = res.data.address;
            this.reportforms = res.data.reportforms;
          }
        } else {
          this.work = 99;
          this.worktime = 0;
          this.worklong = 0;
        }
      } else {
      }
    },
    endWork (workid, worktype, e) {
      console.log(workid)
      console.log(worktype)
      console.log(e)
      let titleInfo = e.mp.currentTarget.dataset.title;
      let that = this;
      let time = moment().format('YYYY-MM-DD');
      // 4 结束考勤 7 结束加班
      this.workendId = workid;
      this.workendType = worktype;
      wx.showModal({
        title: `补录考勤`,
        content: `补录${time}的${titleInfo}吗？`,
        confirmColor: '#FF4444',
        success: res => {
          if (res.confirm) {
            that.workEndwork(workid, worktype)
          } else {
          }
        }
      });
    },
    async workEndwork (obj, type) {
      const res = await api.postendwork({ id: obj, type: type, longitude: '0', latitude: '0', address: '补录' });
      if (res.code === '100') {
        this.work = 4;
        this.getwork();
      }
    },
    prev (month) {
      let year = moment().year()
      this.get_month_workinfo(year, month)
    },
    next (month) {
      let year = moment().year()
      this.get_month_workinfo(year, month)
    },
    selectMonth (month, year) {
      this.get_month_workinfo(year, month)
    },
    selectYear (year) {
      let month = moment().month() + 1
      this.get_month_workinfo(year, month)
    },
    setToday () {
      this.$refs.Calendar.setToday()
    },
    async select (val, val2) {
      console.log(val2)
      let date = val2.date;
      let today = moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD').unix();
      let startTimejs = moment(date, 'YYYY-MM-DD').unix();
      if (today < startTimejs) {
        this.btnShow = false
      } else {
        this.btnShow = true
      }
      let endTimejs = startTimejs + 86400;
      let ret = await api.getuserthisdayworkinfo({ user_id: this.userId, start_time_js: startTimejs, end_time_js: endTimejs });
      if (ret.code === '100') {
        if (ret.work[0]) {
          this.work = ret.work[0]
          if (this.work.shenhe_time != 0) {// eslint-disable-line
            this.work.shenhe_time = moment.unix(this.work.shenhe_time).format('YYYY-MM-DD hh:mm');
          }
          if (this.work.time_start != 0) {// eslint-disable-line
            this.work.time_start = moment.unix(this.work.time_start).format('YYYY-MM-DD hh:mm');
          }
          if (this.work.time_end != 0) {// eslint-disable-line
            this.work.time_end = moment.unix(this.work.time_end).format('YYYY-MM-DD hh:mm');
          }
        } else {
          this.work = ''
        }
      }
    },
    reportforms () {
      wx.navigateTo({
        url: '/pages/worker/reportform/reportform'
      })
    },
    but () {
      console.log(11111)
    }
  },
  created () {
  }
}
</script>

<style scoped>
.container {
  background: rgba(153, 153, 153, 0.1);
  height: 100%;
}
.attendance_list {
  padding: 36rpx;
  background: #fff;
  width: 100%;
}
.attendance_list .attendance_div {
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.attendance_div .status {
  color: #ff4444;
}
.supplement {
  margin-top: 20rpx;
}
.mr10 {
  margin-top: 20rpx;
  margin-right: 20rpx;
}
</style>
<style>
.mpvue-calendar {
  margin: 0 auto !important;
}
.mpvue-calendar ._td.selected ._span {
  background: #ff4444 !important;
  color: #fff;
}
.mpvue-calendar ._td ._span {
  position: relative !important;
  z-index: 2;
}
.mpvue-calendar ._td.selected .slot-element {
}
.mpvue-calendar ._td .slot-element {
  font-size: 24rpx;
  font-weight: bold;
  position: absolute;
  top: -10rpx;
  right: -4rpx;
  color: #ff4444;
  z-index: 1;
}
.calendar-years {
  z-index: 22;
}
.calendar-years > ._span.active {
  border: none !important;
  background-color: #ff4444 !important;
  box-shadow: none !important;
}
.mpvue-calendar .lunarStyle.selected ._span {
  line-height: 80rpx;
}
</style>

